
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#main{
				width: 800px;
				height: 500px;
				border: 1px solid;
			}
			img{
				width: 800px;
				height: 500px;
				border: 1px solid;
			}
			#jingdutiao{
				margin-top: 5px;
				width: 250px;
				height: 5px;
				border: 1px solid;
				background-color: black;
			}
			#duqukuang{
				width: 0px;
				height: 5px;
				background-color: red;
			}
			#main1{
				margin-top: 10px;
				width: 250px;
				height: 80px;
				border: 1px solid;
			}
		</style>
	</head>
	<body>
		<div id="main"></div>
		<div id="main1">
			<div id="fileName"></div>
			<div id="fileSize"></div>
			<div id="fileType"></div>
		</div>
		<div id="jingdutiao">
			<div id="duqukuang">
				
			</div>
		</div>
		<span id="duqu">0K</span>/<span id="zonggong">0K</span><br />
		<a href="javascript:document.getElementById('file').click();">选择文件</a>
		<input id="file" style="display: none;" type="file" multiple="multiple" id="" onchange="dianji(this)"/>
		<script type="text/javascript">
		    function dianji(t){
				if (t.files.length>0) {
//					console.log(t.files[0].type)

//					if (t.files[0].type.indexOf("image")) { //加！图片加不进去不加就行
//						console.log("文件选择错误");
//						return;
//					}
//                  if (t.files[0].type.indexOf("image") == -1) { 
//						console.log("文件选择错误");
//						return;
//					}
//                   console.log(t.files[0].type);
					if (t.files[0].type != "image/png" && t.files[0].type != "image/jpeg" && t.files[0].type != "text/plain") {
						alert("文件选择错误,请重新选择");
						return;
					}
                     
                    var file = t.files[0];
				    var fileSize = 0;
					if(file.size > 1024 * 1024){
						fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
					}else{
					    fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
					}
					document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
					document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
					document.getElementById('fileType').innerHTML = 'Type: ' + file.type;



					if (window.FileReader) {
					    var file = new FileReader();
					    file.onloadstart=function(){
						    console.log("onloadstart");
					    }
					    file.onprogress=function(i){
				 		    var zonggong = document.getElementById('zonggong'); 
				 		    var zong =  parseInt(i.total/1024)>1024?parseInt(i.total/1024/1024)+'M':parseInt(i.total/1024)+'K';
				 		    var zong1 =  parseInt(i.total/1024)>1024?parseInt(i.total/1024/1024):parseInt(i.total/1024);
					        var duqu = document.getElementById('duqu'); 
					        var du =  parseInt(i.loaded/1024)>1024?parseInt(i.loaded/1024/1024)+'M':parseInt(i.loaded/1024)+'K';
					        var du1 =  parseInt(i.loaded/1024)>1024?parseInt(i.loaded/1024/1024):parseInt(i.loaded/1024);
					        zonggong.innerHTML = zong;
					        duqu.innerHTML = du;
					        var width = du1/zong1*250;
//					        console.log(width);
					        document.getElementById('duqukuang').style.width = width+'px';
//					        console.log( document.getElementById('duqukuang').style.width);
//					        console.log(i.loaded);
						    console.log(i);
						    console.log("onprogress"); 
					    }
					    file.onload=function(t){
//					    	if (t.files[0].type != "image/png" && t.files[0].type != "image/jpeg") {
					    		document.getElementsByTagName('img').src = '';
					    		var img = document.createElement('img');
					    		img.src = t.target.result;
					    		document.getElementById('main').appendChild(img);
//					    	}else if(t.files[0].type != "text/plain" ){
//					    		document.getElementById('main').innerHTML = t.target.result;
//					    	}
//						    console.log("onload");
					    }
					    file.onloadend=function(){
						    console.log("onloadend");
					    }
					    file.readAsDataURL(t.files[0]);
//					    file.readAsText(t.files[0]);
				    }else{
					    alert('您的浏览器太low了')
				    }
				}
			}
		</script>
	</body>
</html>
